<template>
  <div class="app-container">
    <div class="filter-container">
      <div class="mb10">
        <form-selections :is-active="isActive" :items="formItems" :query-param.sync="queryParam" display="block" @handleSearch="handleSearch">
          <el-button size="mini" type="primary" class="filter-item search" icon="el-icon-search" @click="handleSearch">
            搜索
          </el-button>
          <el-button size="mini" class="filter-item" icon="el-icon-refresh" @click="handleRefresh">
            刷新
          </el-button>
        </form-selections>
      </div>
    </div>

    <!-- 操作按钮 -->
    <div class="operation_button_box mb10">
      <el-button v-action="'notice@save'" size="small" type="primary" icon="el-icon-circle-plus" @click="handleCreateSelf">新增公告</el-button>
      <el-button v-action="'notice@publish'" :disabled="selectedIds.length !== 1" size="small" type="danger" @click="handlePublish(1)">发布</el-button>
      <el-button v-action="'notice@publish'" :disabled="selectedIds.length !== 1" size="small" type="primary" @click="handlePublish(0)">取消发布</el-button>
    </div>
    <div v-loading="loading">
      <el-table ref="multipleTable" :data="data" tooltip-effect="dark" style="width: 100%" border fit @selection-change="handleSelectMulti">
        <el-table-column type="selection" align="center" width="55" />
        <el-table-column align="center" width="109">
          <template slot-scope="scope">
            <span v-action="'notice@update'" class="edit_style" style="margin: 0;" @click="handleUpdateSelf(scope.row.id)">编辑</span>
            <span v-action="'notice@delete'" class="delete_style" style="margin: 0;" @click="handleDelete(scope.row.id)">删除</span>
          </template>
        </el-table-column>
        <el-table-column prop="title" align="center" label="公告名称">
          <template slot-scope="scope">
            <code-item :code="scope.row.title" @click="toInfo(scope.row.id)" />
          </template>
        </el-table-column>
        <el-table-column prop="stauts" align="center" label="发布状态">
          <template slot-scope="scope">
            <dic-transform :dictionaries="statusDic" :code="scope.row.status" />
          </template>
        </el-table-column>
        <el-table-column prop="creator" align="center" label="创建人" />
        <el-table-column prop="created_at" align="center" label="创建时间" />
        <el-table-column prop="updater" align="center" label="修改人" />
        <el-table-column prop="updated_at" align="center" label="修改时间" />
      </el-table>
      <el-pagination v-if="paginate.total > 0" class="pagination_box" background :current-page="paginate.current" :page-sizes="[10, 20, 30, 40]" layout="total, sizes, prev, pager, next, jumper" :total="paginate.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
  </div>
</template>

<script>
import formOperate from '@/layout/mixin/formOperate'
import { parseTime } from '@/utils'
import { action } from '@/directive/permission/index.js' // 权限判断指令
import dicTransform from '@/components/dicTransform'
import codeItem from '@/components/base/code'
import cacheList from '@/layout/mixin/cacheList'
export default {
  name: 'Notice',
  components: {
    dicTransform,
    codeItem
  },
  directives: {
    action
  },
  mixins: [formOperate, cacheList],
  data() {
    return {
      componentName: 'Notice',
      url: 'notice',
      selectedIds: [],
      queryParam: {},
      statusDic: [
        {
          code: 1,
          name: '已发布'
        },
        {
          code: 2,
          name: '未发布'
        }
      ],
      cachePaths: [
        '/system/notice/add',
        '/system/notice/edit',
        '/system/notice/info'
      ],
      formItems: [
        {
          label: '公告名称',
          key: 'title',
          type: 'input',
          placeholder: '请输入公告名称'
        },
        {
          label: '发布状态',
          key: 'status',
          type: 'select',
          options: [
            {
              label: '已发布',
              value: '1'
            },
            {
              label: '未发布',
              value: '2'
            }
          ]
        }
      ]
    }
  },
  activated() {
    this.getList()
  },
  methods: {
    formatLoginTime(time) {
      return parseTime(time)
    },
    // 发布/取消发布 flag: 0-取消发布 1-发布
    handlePublish(flag) {
      const vm = this
      const item = vm.data.find((e) => vm.selectedIds[0] === e.id)
      const arr = [1, 2]
      if (item.status !== arr[flag]) {
        return vm.$message.error(`所选数据已${flag ? '发布' : '取消发布'}`)
      }
      vm.$http.put(`/notice/publish/${item.id}`).then((res) => {
        vm.$message.success(flag ? '发布成功' : '取消成功')
        vm.handleSearch()
      })
    },
    // 新增公告
    handleCreateSelf() {
      const vm = this
      vm.$router.push({ path: `/system/notice/add` })
    },
    // 编辑公告
    handleUpdateSelf(id) {
      const vm = this
      vm.$router.push({ path: `/system/notice/edit/${id}` })
    },
    // 详情
    toInfo(id) {
      const vm = this
      vm.$router.push({ path: `/system/notice/info/${id}` })
    }
  }
}
</script>

<style scoped>
</style>
